<md-content class="md-padding">
  <div layout="column" layout-gt-xs="row">
    <div flex-gt-xs="40" class="col-lg-40">
      <md-button ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('general')" class="md-primary">
        General
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('monitoring')" class="md-primary">
        Monitoring
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('logs')" class="md-primary">
        Logs
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('replication')" class="md-primary">
        Replication
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('rejoin')" class="md-primary">
        Rejoin
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('backups')" class="md-primary">
        Backups
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('schedulers')" class="md-primary">
        Schedulers
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('proxies')" class="md-primary">
        Proxies
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('graphs')" class="md-primary">
        Graphs
      </md-button>
      <BR>
      <md-button  ng-if="selectedClusterName" style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('certificates')" class="md-primary">
        Certificates
      </md-button>
      <BR>
      <md-button style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('cloud18')" class="md-primary">
        Cloud18
      </md-button>
      <md-button style="width:60%; border-radius: 10px 10px 10px 10px; background-color: lightgray;;transition: 0.3s;" ng-click="setSettingsMenu('global')" class="md-primary">
        Global
      </md-button>
    </div>
    <div flex-gt-xs="60" class="col-lg-60">
      <div ng-if="settingsMenu.global" ng-include src="'static/card-setting-auth.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.general" ng-include src="'static/card-setting-failovermode.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.general" ng-include src="'static/card-setting-topology.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.replication" ng-include src="'static/card-setting-replication.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.rejoin" ng-include src="'static/card-setting-rejoin.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.backups" ng-include src="'static/card-setting-backup.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.backups" ng-include src="'static/card-setting-binlog.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.proxies" ng-include src="'static/card-setting-proxysql.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.monitoring" ng-include src="'static/card-setting-capture.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.schedulers" ng-include src="'static/card-setting-scheduler.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.general" ng-include src="'static/card-setting-testmode.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.proxies" ng-include src="'static/card-setting-proxy.html'"></div>
      <div ng-if="settingsMenu.cloud18" ng-include src="'static/card-setting-cloud18.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.logs" ng-include src="'static/card-setting-logs.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.graphs" ng-include src="'static/card-setting-graphs.html'"></div>
      <div ng-if="selectedClusterName && settingsMenu.certificates" ng-include src="'static/card-setting-certificates.html'"></div>
    </div>
  </div>


</md-content>